import { useState } from "react";
import "./index.scss";
interface IndexProps {
  title: string;
  Processingimg: string;
  ProcessingMp4: string;
  hot: string;
}

const Index: React.FC<IndexProps> = ({
  Processingimg,
  title,
  ProcessingMp4,
  hot,
}) => {
    const [imgs,setImgs]=useState('block')
    const [videos,setVideos]=useState('none')
  const handleImg = () => {
    setImgs('none')
    setVideos('block')
  };
  const handleVideo = () => {
     setImgs('block')
    setVideos('none')
  };
  return (
    <div
      className="processingc"
      onMouseEnter={handleImg}
      onMouseLeave={handleVideo}
    >
      <div className="processingc_text">
        <div>{title}</div>
        {hot !== "" ? (
          <div>
            <img src={hot} alt="" />
          </div>
        ) : (
          ""
        )}
      </div>
      <div className="processingc_box">
        <div className="processingc_img" style={{display:imgs}}>
          <img src={Processingimg} alt="" />
        </div>
        <div style={{display:videos}}>
          <video
            src={ProcessingMp4}
            muted
            loop
            autoPlay
            className="processingc_video"
          ></video>
        </div>
      </div>
    </div>
  );
};

export default Index;
